<template>
    <div class="content"> 
      <div class="spare-ar" style="width: 1304px;">
				<div class="spare-ara">
					<div class="spare-ara-a clearfix">
						<div class="spare-ara-al">
							<div class="spare-ara-all"><input type="text" v-model="title" placeholder="请输入关键字" id="tag-search-field"/></div>
							<div class="spare-ara-alr" id="tag-search" @click="getDatas(title)"></div>
						</div>
						<div class="spare-ara-ar">	
							<a href="#" class="spare-qx" :style="{display:(styleswel?'inline-block':'none')}" @click="toggle(qx)" sel="Y" hid='Y'>{{qx}}</a>
							<a href="#" class="spare-edit" :style="{display:(styleswel?'inline-block':'none')}" @click="editTag()"  hid='Y'>编 辑</a>
							<a id="tags-del" href="#" class="spare-del" :style="{display:(styleswel?'inline-block':'none')}" 
                                @click="showModal=true"
                             hid='Y'>删 除</a>
                             <confirm v-if="showModal"  @deleteTag="deleteTag" @close="close"></confirm>
						</div>
					</div>
					<div class="srcoll-documentation" id="srcoll-documentation">
					<div class="documentation nottake">
						<ul class="lists" id="lists">
                            <a v-for="(data,index) in datas" :key="data.id">
                                <li ownType="rows"  :class="{active:data.checked}" @click="clickLeft(index,data)"  @contextmenu.prevent="clickRight(index,data)">
                                    <div class="paper-a">数据模块：{{data.code}}</div>
                                    <div class="myplan-d">书签名： {{data.title}}</div>
                                    <div class="documentation-check"></div>
                                </li>
                            </a>
						</ul>
					</div>
					</div>
				</div>
			</div>
    </div>
</template>
<script>
import confirm from '@/components/ietm/record/confirm'
export default {
    data(){
        return {
            datas:[],
            title:'',
            qx:'全选',
            styleswel:false,
            checks:[],
            showModal:false
        }
    },
    components:{
        'confirm':confirm
    },
    methods:{
        getDatas: function(title) {
            this.axios
                .get("/ietm/findByTitle", {
                params: {
                    title: title
                }
                })
                .then(res => {
                this.datas = res.data;
                });
        },
        // 右键事件
        clickRight(index,data){
            var that = this;
            data.checked=true;
            if(that.checks.length==0)
            {
                 that.checks.push(data)
            }
            else{
                // 已选中数组中如果存在就不添加数据定义一个flag标识默认false
                // 如果存在flag就置为true,如果不存在就可以添加到checks中
                var flag= false
                that.checks.forEach(item=>{
                    if(data.id==item.id)
                    {
                        flag=true
                    }
                })
                if(flag==false)
                {
                     that.checks.push(data)
                }
            }
            this.styleswel = true
        }, 
        // 左键点击事件
        clickLeft(index,data)
        {
            var that = this
            that.checks.forEach((item,index1)=>{
                if(data.id==item.id)
                {
                    this.checks.splice(index1,1)
                     data.checked = false
                }
                })
            if(this.checks.length==0)
            {
                this.styleswel = false
            }
        },
        // 全选和取消切换
        toggle(qx){
            var that = this;
            that.checks=[];
            if(qx=='全选')
            {
                 this.qx = '取消'
                 this.datas.forEach(function(item){
                    item.checked = true
                    that.checks.push(item)
                 });
               
            }
            else{
                this.qx = '全选'
                this.datas.forEach(function(item){
                    item.checked = false
                 });
                that.checks = []
                this.styleswel=false
            }
        },
        editTag(){
            if(this.checks.length>1)
            {
                alert('编辑数据只能选择一条。')
            }
            else{
                this.$router.push({name:'editTag',params:{row:this.checks[0]}})
            }
        },
        deleteTag(){
           console.log(this.checks)
           this.showModal = false
           this.checks.forEach(item=>{
               this.postRequest('/ietm/deleteMarker',item).then(res=>{
                   this.getDatas('')
               })
           })
           this.styleswel = false
           this.checks=[]
        },
        close(){
            this.datas.forEach(item=>{
               item.checked = false
           })
            this.showModal = false
            this.styleswel = false
            this.checks = []
            console.log(this.checks)
        }
    },
    created(){
        this.getDatas('');
    }

}
</script>
<style scoped>
@import url("../../../assets/css/content.css");
@import url("../../../assets/css/animation.css");
</style>
